import React from 'react';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm,Button } from 'antd';
import { routerRedux,Link} from 'dva/router';
import { PAGE_SIZE } from '../constants/constants';
import Modal from '../components/Modal/Modal';
const ButtonGroup = Button.Group;



function JobRoute({ dispatch, list: dataSource, loading, total, page: current }) {
  
  function pageChangeHandler(page) {
    dispatch(routerRedux.push({
      pathname: '/job',
      query: { page },
    }));
  }
  
  function addHandler(values){
       dispatch({
        type: 'job/add',
        payload: { values },
     });
  }
  function editHandler(id, values) {
    dispatch({
      type: 'job/patch',
      payload: { id, values },
    });
  }

  function deleteHandler(id) {
    dispatch({
      type: 'job/remove',
      payload: id,
    });
  }
 let recordNull={
   name:"",
   age:"",
};

 const config=[
        // {
        // key:"_id",
        // isInit:true,
        // isShow:true,
        // isEdit:false
        // },
        {
        key:"name",
        isInit:true,
        isShow:true,
        isEdit:true
        },
        {
        key:"age",
        isInit:true,
        isShow:true,
        isEdit:true
        }
    ];
 const columns = [
    {
    title: 'id',
    dataIndex: '_id',
    key: '_id',
    },
    {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    },
   {
     title: '年龄',
     dataIndex: 'age',
     key: 'age',
   },
    {
      title: '操作',
      key: 'operation',
      render: (text, record) => (
        <span >
          <ButtonGroup>
            <Modal config={config} record={record} onOk={editHandler.bind(null, record._id)}>
              <Button type="primary">编辑</Button>
              </Modal>
            <Popconfirm title="确认删除吗?" onConfirm={deleteHandler.bind(null, record._id)}>
                <Button type="primary">删除</Button>
              </Popconfirm>
                         
          </ButtonGroup>
        </span>
      ),
    },
  ];


const addConfig=[
       
        {
        key:"name",
        isInit:true,
        isShow:true,
        isEdit:true
        },
        {
        key:"age",
        isInit:true,
        isShow:true,
        isEdit:true
        },
    ];

  // console.log(total);
  // console.log(page);
  return (   
    <div >
      <div>
        <Modal  config={addConfig}  record={recordNull} onOk={addHandler.bind(null)}>
            <Button type="primary"   >添加</Button>
        </Modal>
        <Table
          columns={columns}
          dataSource={dataSource}
          loading={loading}
          rowKey={record => record._id}
          pagination={false}          
        />        
        <Pagination
          className="ant-table-pagination"
          total={total}
          current={current}
          pageSize={PAGE_SIZE}
          onChange={pageChangeHandler}
        />
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  const { list, total, page } = state.job;
  return {
    loading: state.loading.models.job,
    list,
    total,
    page,
  };
}

export default connect(mapStateToProps)(JobRoute);